<template>
  <div class="base-page">
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :right-text="rightText"
      :left-arrow="leftArrow"
      @click-left="handleClickLeft"
      @click-right="handleClickRight"
    ></van-nav-bar>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "BasePage",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
    leftText: {
      type: String,
      default: "返回",
    },
    rightText: {
      type: String,
      default: "按钮",
    },
    onClickLeft: {
      type: Function,
    },
    onClickRight: {
      type: Function,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClickLeft() {
      if (!this.onClickLeft) {
        this.$router.goBack();
      } else {
        this.onClickLeft();
      }
    },
    handleClickRight() {
      this.onClickRight();
    },
  },
};
</script>

<style lang="scss" scoped></style>
